<template>
	<view>
		<nav-bars title="个人实名认证"></nav-bars>
		<view class="information">
			<view class="information_tit">请提交个人资料</view>
			<view class="information_from">
				<!-- <span style="font-size: 30rpx;color: #F43530;margin-right: 10rpx;">*</span> -->
				<view class="information_lable">姓名</view>
				<input type="text" v-model="UserName" placeholder-style="color:#B6B6B6;" placeholder="请输入姓名" />
			</view>
			<view class="information_from">
				<!-- <span style="font-size: 30rpx;color: #F43530;margin-right: 10rpx;">*</span> -->
				<view class="information_lable">身份证号码</view>
				<input type="text" v-model="identity" maxlength="18" placeholder-style="color:#B6B6B6;" placeholder="请输入身份证号码" />
			</view>
			<view class="information_time">
				<view class="information_timeTit">身份证有效开始时间</view>
				<view style="display: flex;align-items: center;justify-content: space-between;" @click="Start = true">
					<view class="information_Mes" :style="{ color: StartTime == '' ? '#B6B6B6' : '#212121' }">{{ StartTime == '' ? '请选择开始时间' : StartTime }}</view>
					<u-icon name="arrow-right" color="#999999" size="24"></u-icon>
				</view>
				<u-picker mode="time" v-model="Start" :params="params" @confirm="StartTimeConfirm"></u-picker>
			</view>
			<view class="information_time">
				<view class="information_timeTit">身份证过期时间</view>
				<view style="display: flex;align-items: center;justify-content: space-between;" @click="End = true">
					<view class="information_Mes" :style="{ color: EndTime == '' ? '#B6B6B6' : '#212121' }">{{ EndTime == '' ? '请选择过期时间(长期留空)' : EndTime }}</view>
					<u-icon name="arrow-right" color="#999999" size="24"></u-icon>
				</view>
				<u-picker mode="time" v-model="End" :params="params" @confirm="EndTimeConfirm"></u-picker>
			</view>
			<view class="information_from">
				<view class="information_lable">职业</view>
				<input type="text" v-model="Job" placeholder-style="color:#B6B6B6;" placeholder="请输入职业" />
			</view>
			<view class="information_from">
				<view class="information_lable">联系电话</view>
				<input type="number" @input="bindKeyInput" :value="Phone" maxlength="11" placeholder-style="color:#B6B6B6;" placeholder="请输入联系电话" />
			</view>
			<view class="information_time">
				<view class="information_timeTit">联系地址</view>
				<input type="text" v-model="address" placeholder-style="color:#B6B6B6;" placeholder="请输入联系地址" />
			</view>
			<view class="information_btn"><view class="btn" @click="UpMessage">提交资料</view></view>
			<view class="information_Tips">
				<checkbox-group @change="checkboxChange" class="checkbox"><checkbox v-mode="checked" :checked="checked" /></checkbox-group>
				<view class="information_TipsList" @click="checkedChange">
					<view style="color: #B0B0B0;">我已阅读并同意</view>
					<view style="color: #C3AB7C;" @click.stop="agent">《用户授权协议》</view>
					<!-- <view style="color: #C3AB7C;">《融易装App用户隐私协议》</view> -->
				</view>
			</view>
		</view>
	</view>
</template>
<script>
var Rexphone = /^1[2|3|4|5|6|7|8|9]\d{9}$/;
import Https from '@/service/verification.js';
export default {
	name: '',
	components: {},
	data() {
		return {
			params: {
				year: true,
				month: true,
				day: true,
				hour: false,
				minute: false,
				second: false
			},
			Start: false, //开始选择器展示
			End: false, //结束选择器展示
			// form
			UserName: '', //姓名
			identity: '', //身份证
			StartTime: '', //身份证有效开始时间
			EndTime: '', // 身份证有效结束时间
			Job: '', //职业
			Phone: '', //联系方式
			address: '', //联系地址
			checked: false, //协议多选框
			imageList: null
		};
	},
	onReady() {
		var that = this;
		var Personal = uni.getStorageSync('Personal');
		that.UserName = Personal.Name;
		that.identity = Personal.IdNum;
		that.StartTime = Personal.startTime;
		that.EndTime = Personal.endTime;
		that.imageList = Personal.imageList;
		// console.log(Personal);
	},
	onUnload() {
		uni.removeStorageSync('Personal');
	},
	created() {},
	mounted() {},
	methods: {
		agent(){
			uni.navigateTo({
				url: '/pages_login/pages/login/agreement/index',
			});
		},
		checkboxChange(e) {
			var that = this;
			that.checked = e.detail.value[0] == 'false' ? 'true' : e.detail.value[0] == undefined ? false : true;
			// console.log(that.checked);
		},
		UpMessage() {
			var that = this;
			var UserName = that.UserName;
			var identity = that.identity;
			var Phone = that.Phone;
			var checked = that.checked;
			if (UserName != '' && identity != '' && Phone != '' && Rexphone.test(Phone) && checked == true) {
				console.log(123);
				let params = {
					name: that.UserName,
					id_no: that.identity,
					identityBeginDate: that.StartTime,
					identityEndDate: that.EndTime,
					address: that.address,
					professionNo: that.Job,
					idCard_front_img_id: that.imageList.imagejust.id, //身份证正面
					idCard_back_img_id: that.imageList.imageback.id //身份证背面
				};
				uni.showLoading({
					title: '正在提交...'
				});
				Https.setRealName(params).then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						uni.showToast({
							title: '提交成功',
							icon: 'success',
							duration: 2000
						});
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages_Verification/verification/status/status?isPersonal=true&status=0'
							});
						}, 2100);
						// console.log(that.BankCard);
					} else {
						// uni.redirectTo({
						//   url: '/pages_Verification/verification/status/status?isPersonal=true&status=2'
						// })
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			}

			if (UserName == '') {
				uni.showToast({
					title: '请输入姓名',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			if (identity == '') {
				uni.showToast({
					title: '请输入身份证号码',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			if (Phone == '') {
				uni.showToast({
					title: '请输入手机号码',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			if (!Rexphone.test(Phone)) {
				uni.showToast({
					title: '手机号码有误！',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			if (checked == false) {
				uni.showToast({
					title: '请勾选下方协议',
					icon: 'none',
					duration: 2000
				});
				return;
			}
		},
		// 验证只能输入数字
		validateNumber(val) {
			return val.replace(/\D/g, '');
		},
		// 手机号码的双向数据绑定只能输入数字
		bindKeyInput(e) {
			var that = this;
			let value = that.validateNumber(e.detail.value);
			that.Phone = value;
			return value;
		},
		// 身份证有效开始时间
		StartTimeConfirm(val) {
			var that = this;
			// console.log(val);
			that.StartTime = val.year + '-' + val.month + '-' + val.day;
		},
		// 身份证有效结束时间
		EndTimeConfirm(val) {
			var that = this;
			// console.log(val);
			that.EndTime = val.year + '-' + val.month + '-' + val.day;
		},
		checkedChange() {
			this.checked = !this.checked;
		}
	}
};
</script>
<style lang="less">
page {
	background: #fff;
}
checkbox .wx-checkbox-input {
	border-radius: 0 !important; /* 圆角 */
	width: 26rpx; /* 背景的宽 */
	height: 26rpx; /* 背景的高 */
}
.information {
	padding: 32rpx;
	.information_tit {
		font-size: 60rpx;
		font-weight: 500;
		color: #212121;
		margin-bottom: 94rpx;
	}
	.information_from {
		display: flex;
		align-items: center;
		padding-bottom: 26rpx;
		border-bottom: 2rpx solid #f1f1f1;
		margin-bottom: 40rpx;
		.information_lable {
			width: 150rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #737373;
			margin-right: 32rpx;
		}
		input {
			font-size: 30rpx;
			font-weight: 500;
			color: #212121;
			flex: 1;
		}
	}
	.information_time {
		padding-bottom: 26rpx;
		border-bottom: 2rpx solid #f1f1f1;
		margin-bottom: 40rpx;
		.information_timeTit {
			font-size: 30rpx;
			font-weight: 500;
			color: #737373;
			margin-bottom: 24rpx;
		}
		.information_Mes {
			font-size: 30rpx;
			font-weight: 500;
			color: #212121;
		}
	}
	.information_btn {
		padding-top: 29rpx;
		.btn {
			height: 90rpx;
			background: #c3ab7c;
			border-radius: 10rpx;
			font-size: 34rpx;
			font-weight: 500;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.information_Tips {
		display: flex;
		align-items: flex-start;
		margin-top: 24rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		.information_TipsList {
			padding-top: 6rpx;
			font-size: 26rpx;
			font-weight: bold;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
		}
	}
}
</style>
